<template>
    <div class="shop_info">
        <div class="avatar">
            <el-image :preview-src-list="[shopLog]" :src="shopLog" />
        </div>
        <div class="center">
            <div class="shop_name">{{ shopInfo.shopName }}</div>
            <div class="shop_desc">
                <el-icon class="clock_icon"><Clock /></el-icon>开店时间：{{
                    format(new Date(shopInfo.createdAt), 'YYYY-MM-DD')
                }}
            </div>
        </div>
        <div class="qr_code">
            <el-image :preview-src-list="[props.shopQrCode]" :src="props.shopQrCode" />
        </div>
    </div>
</template>

<script setup>
import storage from '@/commons/storage';
import { format } from '@/commons/utils';
import { computed } from 'vue';

const props = defineProps({
    shopQrCode: { type: String }
});
const shopLog = ((storage.get('ZW-AUTH') || {}).tenant || {}).logo;
// 刷新页面取一次
const shopInfo = computed(() => {
    const shopObj = storage.get('ZW-AUTH')?.shopList.find(x => x.shopId === storage.get('ZW-SHOPID')) || {};
    return shopObj;
});
</script>

<style lang="scss" scoped>
.shop_info {
    display: flex;
    align-items: center;
    padding: 14px 24px;
    background-color: #fff;
    .avatar {
        width: 80px;
        height: 80px;
        margin-right: 16px;
    }
    .el-image {
        width: 100%;
        height: 100%;
    }
    .center {
        flex: 1;
        margin-right: 20px;
        .shop_name {
            margin-bottom: 20px;
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #33302d;
        }
        .shop_desc {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #969696;
            .clock_icon {
                margin-right: 8px;
            }
        }
    }
    .qr_code {
        width: 100px;
        height: 100px;
        background: #ffffff;
        border-radius: 8px;
    }
}
</style>
